<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<style type="text/css">
			body{
				background: #FFFFFF;
			}
			.mui-bar{
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
			}
			a , .mui-title{
				color:rgba(255,255,255,1);
			}
			.mui-bar-nav ~ .mui-content {
			padding-top: 40px; 
}
			.watch_three{
				width: calc(96% - 15px);
				position: relative;
				float: left;
				padding-left: 15px;
				box-sizing: border-box;
				border-bottom: 1px solid #d4d4d4;
				padding-bottom: 15px;
				margin-left: 15px;
				box-sizing: border-box;
				margin-top: 20px;
			}
			.three_fir{
				width: 15%;
				position: relative;
				float: left;
				height: 100%;
			}
			.three_fir>img{
				width: 50px;
				height: 50px;
				border-radius: 7.5px;
			}
			.three_se{
				width: 85%;
				position: relative;
				float: left;
			}
			.three_se>span:nth-child(1){
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(182,65,62,1);
				padding-left: 10px;
				box-sizing: border-box;
               
			}
			.three_se>span:nth-child(2){
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(182,65,62,1);
		
				float: right;
			}
			.three_thi{
				width: 100%;
				position: relative;
				float: none;
				line-height: 30px;
			}
			.three_thi>span{
				font-size:15px;
			font-family:PingFang-SC-Medium;
			font-weight:500;	
			color:rgba(153,153,153,1);
			padding-left: 10px;
			box-sizing: border-box;
			width: 70%;
			display: inline-block;
			overflow-x: hidden;
			height: 20rpx;
			white-space: nowrap;
			float: left;
			}
			.three_thi>img{
				width:9px;
				height:9px;
				
				background:rgba(255,29,18,1);
				border-radius:50%;
				position: relative;
				float: right;
				margin-top: 12px;
			}
			.adddclass{
				border: 1px solid  darkred;
				
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">消息中心</h1>
		</header>
		<div class="mui-content">
				<div class="watch_three  xiton"  data-id="1">
					<div class="three_fir">
						<img src="../image/xiaox.png" alt="">
					</div>
					<div class="three_se">
						<span>系统消息</span>
						<span>19/07/05</span>
					</div>
					<div class="three_thi">
						<span>请问一下店家，这个东西包邮吗？</span>
						<img src="../image/tuoyuan.png" alt="">
					</div>
				</div>
				<!-- <div class="watch_three  xiaoxi" data-id="2">
					<div class="three_fir">
						<img src="../image/touxiang.png" alt="">
					</div>
					<div class="three_se">
						<span>张雪</span>
						<span>19/07/05</span>
					</div>
					<div class="three_thi">
						<span>请问一下店家，这个东西包邮吗？</span>
						<img src="../image/tuoyuan.png" alt="">
					</div>
				</div> -->
				
					<!-- <div class="watch_three  xiaoxi" data-id="3">
					<div class="three_fir">
						<img src="../image/touxiang.png" alt="">
					</div>
					<div class="three_se">
						<span>张雪</span>
						<span>19/07/05</span>
					</div>
					<div class="three_thi">
						<span>请问一下店家，这个东西包邮吗？</span>
						<img src="../image/tuoyuan.png" alt="">
					</div>
				</div> -->
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			window.addEventListener("wyaoshuaxin", function (e) {
				location.reload();
				});
			
			mui.plusReady(function(){
				var url = plus.storage.getItem('url');
				var user = plus.storage.getItem('user');
				user = JSON.parse(user);
				mui.post(url+'/juyou/Message/getmassage',{token:user.token},function(res){
					if(res.code==200){
						var str = '<div class="three_fir">'+
										'<img src="../image/xiaox.png" alt="">'+
									'</div>'+
									'<div class="three_se">'+
										'<span>系统消息</span>'+
										'<span>'+res.data.sysmessage.create_time+'</span>'+
									'</div>'+
									'<div class="three_thi">'+
										'<span>'+res.data.sysmessage.neirong+'</span>';
										if(res.data.sysmessage.weidu){
											str+='<img src="../image/tuoyuan.png" alt="">';
										}
										str+='</div>';
									$(".xiton").html(str);
									str = '';
									mui.each(res.data.data,function(i,v){
										if(v.forms.id==user.id){
											str +='<div class="watch_three  xiaoxi" data-id="'+v.tos.id+'">'+
													'<div class="three_fir">'+
														'<img src="'+v.tos.touxiang+'" alt="">'+
													'</div>'+
													'<div class="three_se">'+
														'<span>'+v.tos.name+'</span>'+
														'<span>'+v.create_time+'</span>'+
													'</div>'+
													'<div class="three_thi">'+
														'<span>'+v.neirong+'</span>';
														if(v.weidu>0){
															str+='<img src="../image/tuoyuan.png" alt="">';
														}
														str+='</div>'+
												'</div>';
										}else{
											str +='<div class="watch_three  xiaoxi" data-id="'+v.forms.id+'">'+
													'<div class="three_fir">'+
														'<img src="'+v.forms.touxiang+'" alt="">'+
													'</div>'+
													'<div class="three_se">'+
														'<span>'+v.forms.name+'</span>'+
														'<span>'+v.create_time+'</span>'+
													'</div>'+
													'<div class="three_thi">'+
														'<span>'+v.neirong+'</span>';
														if(v.weidu>0){
																	str+='<img src="../image/tuoyuan.png" alt="">';
																}
																str+='</div>'+
														'</div>';
										}
										
									})
									$(".mui-content").append(str);
					}else{
						mui.toast(res.msg);
					}
				})
				
				
				mui.init({
					beforeback: function() {　　　　
					var list = plus.webview.currentWebview().opener();　　　　
						  //refresh是A页面自定义事件
					mui.fire(list, 'refresh');
						 //返回true,继续页面关闭逻辑
					return true;
					},
				});
				
				
				//点击系统消息
				mui(".mui-content").on("tap",".xiton",function(){
					mui.openWindow({
						url:"messages.html",
						id:"messages.html",
					})
				})
				
				
				var  ischangan=false;   //判断是否是长按还是点击
				var timeOutEvent=0;     // 定时器
				//点击消息
				mui(".mui-content").on("tap",".xiaoxi",function(){
					var tos = $(this).attr('data-id');
							mui.openWindow({
							url:"../sub2/danliao.html",
							id:"danliao.html",
							extras:{
								tos:tos
							}
						})
				})
				
				
				// 长按消息开始
				$(".xiaoxi").bind('touchstart',function(e){
					timeOutEvent=setTimeout(function() {
							var id=$(this).attr("data-id")
							    var btnArray = ['取消', '确认']; 
							    var Phone = "删除这条消息"; 
							    mui.confirm('是否确认 ' + Phone + ' ？', '删除提示', btnArray, function(e) { 
							        if (e.index == 0) { 
										ischangan=false;
							        }  else{
										ischangan=false;
										mui.alert("删除成功")
									}
							    })
						
					}, 500);
				})
			})
			
		
			
		</script>
	</body>

</html>
